<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px;height: 400px;"></div>
</body>
<script>
    // 常用于分析几个数据之间是否有某种关系
    // 这个数据需要传递一个二维的数组
    // 散点图的常见的效果
    // 气泡图效果
    // 散点的大小不同
    // 通过symbolSize决定
    // 散点的颜色不同
    // 通过itemStyle.color决定

    // 涟漪动画效果
    // 通过设置type:effectScatter
    // 通过rippleEffect来配置涟漪的范围


    var arr=[[170,40],[180,60],[190,65],[168,60]]

    var mEcharts = echarts.init(document.querySelector('div'))
    var option = {
            xAxis:{
                type:'value',
                scale:true//让数据不从0开始
            },
            yAxis:{
                type:'value',
                scale:true
            },
            tooltip:{
                trigger:'item'
            },
            series:[
                {
                    // type:'scatter',//让数据呈现为散点
                    type:'effectScatter',//让数据呈现是涟漪效果
                    // 用来控制涟漪效果展示的时机
                    showEffectOn:'emphasis',
                    rippleEffect:{
                        scale:10//涟漪数据的扩散范围
                    },
                    data:arr,
                    // 改变散点的大小
                    // symbolSize:30//让所有的散点都变大了
                    // symbolSize可以返回一个函数，动态的决定散点的大小，他有一个参数arg他有当前散点的数据
                    symbolSize:function(arg){
                        // console.log(arg);
                        var height = arg[0]/100
                        var width =arg[1]
                        // bmi 值 = 体重 kg/ (身高*身高) 大于28，代表肥胖
                        var bmi = width/(height*height)
                        if(bmi > 28){
                            return 20
                        }
                        return 5;
                    },
                    itemStyle:{
                        color:function(arg){
                              // console.log(arg);
                        var height = arg.data[0]/100
                        var width =arg.data[1]
                        // bmi 值 = 体重 kg/ (身高*身高) 大于28，代表肥胖
                        var bmi = width/(height*height)
                        if(bmi > 28){
                            return 'pink'
                        }
                        return 'red';
                        }
                    }
                }
            ]
    }
    mEcharts.setOption(option)
</script>
</html>